import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { Layout } from '../components/layout/Layout';
import { HomePage, UsersPage, ProductsPage } from '../components/pages';
import { ErrorPage } from '../components/pages/ErrorPage';
import DemoPage from '../components/pages/DemoPage';
import DemoBPage from '../components/pages/DemoBPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: 'users',
        element: <UsersPage />,
      },
      {
        path: 'products',
        element: <ProductsPage />,
      },
      {
        path: 'demo',
        element: <DemoPage />,
      },
      {
        path: 'demo-b',
        element: <DemoBPage />,
      },
    ],
  },
]);

export const AppRouter: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default AppRouter;